<template>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" width="100%" height="220" />
        </van-swipe-item>
    </van-swipe>
    <!--快捷入口图标-->
    <van-grid :column-num="5" :border="false" icon-size="28px">
        <van-grid-item v-for="value in gridIcon" :key="value" :icon="value.icon" :text="value.text" :to="value.url" />
    </van-grid>
    <div class=video-content>
        <div class="videos" v-for="item in videodata" :key="item.id" @click="onVideo(item.id)">
            <van-icon name="play-circle" size="30px" class="icons" />
            <div style="margin-top: -33px; font-size: 15px; margin-bottom: 10px;">{{ item.vname }}</div>
            <van-image width="100%" height="200" :src="item.vimg" />
            <van-row>
                <van-col span="5">
                    <div style="font-size: 10px; color: #979AA8; text-align: center; margin-top: 5px;">
                        {{ item.username }}
                    </div>

                </van-col>
                <van-col span="4">
                    <div style="font-size: 10px; color: #979AA8; margin-top: 5px;">
                        {{ item.count }}万次播放
                    </div>
                </van-col>
                <van-col span="15">
                    <div style="font-size: 10px; color: #979AA8; margin-top: 5px;">
                        {{ item.createtime }}
                    </div>
                </van-col>
            </van-row>
            <hr style="color: aliceblue;">
            </hr>
        </div>

    </div>

</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
// import axios from 'axios'
import { VideoApi } from '../api/index';

const images = ref([
    'https://p1-dcd.byteimg.com/img/tos-cn-i-dcdx/c80377447b084fdab283fb21f2d10950~tplv-dcdx-default:0:0.png',
    'https://p1-dcd.byteimg.com/img/tos-cn-i-dcdx/722d7a2c2ce64ce59c4ef4b13cb8750c~tplv-dcdx-default:0:0.png',
]);

const gridIcon = ref([
    { id: 1, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/car-91669090d3a0ab0d9a2a..png', text: '车型大全' },
    { id: 2, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/rank-fffb4b136cdb7c8a4423..png', text: '排行榜', url: 'https://m.dcdapp.com/motor/m/car_series/rank?browser_coop=&link_source=undefined' },
    { id: 3, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/community-e7b0155680ebf038a88c..png', text: '车友圈' },
    { id: 4, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/usedcar-cc09df4fb419a8ffde96..png', text: '二手车', url: 'persche' },
    { id: 5, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/search-3191b0fb041f0728a3f6..png', text: '条件选车' }

])

const videodata = ref([
    { id: 1, vname: '2025年，Model Y还行不行', img: 'http://www.hphs.com/image/y.png', uname: '韩路聊车', vtime: '2025-07-29', vplay: '9.4' },
    { id: 2, vname: '永不断电的房车？比亚迪T5DM新能源+2380W太阳能板！', img: 'http://www.hphs.com/image/puld.png', uname: '王成佛半山木屋', vtime: '2024-12-13', vplay: '9.9' },
    { id: 3, vname: '你真的需要这样的大路虎吗？这些问题你可要想清楚了！', img: 'http://www.hphs.com/image/luhu.png', uname: '楠哥益平', vtime: '2025-10-22', vplay: '10.9' },
    { id: 4, vname: '吉利汽车是你所需要的吗？这些性能包你满意', img: 'http://www.hphs.com/image/jili.png', uname: '楠哥益平', vtime: '2025-10-19', vplay: '22.9' },
])


const onVideo = (id) => {
  router.push({ name: 'videoplay',query: {id:id} })
}


// 钩子函数  页面加载时候 立刻加载函数内部所有的代码
onMounted(()=>{
getVideoApi()
})

const getVideoApi = () =>{
    // axios.get('http://localhost:8081/api/video').then(res=>{
    //     console.log(res);
        
    // })
    VideoApi.select.call().then(res =>{
        console.log(res);
        videodata.value = res
        images.value = res.map(item => item.vimg)
    })
}
</script>

<style scoped>
.videos {
    width: 100%;
    margin-top: 10px;
}
.video-content {
    margin-bottom: 60px;
}

.icons {
    position: relative;
    top: 107px;
    left: 193px;
    z-index: 100;
    color: white;

}
</style>